<template>
	<view class="container">
		<view class="files">
			<block v-for="(item, index) in picture" :key="index">
				<view class="fileName flex-bet">
					<view class="left-name" @tap="onOpenDoc(item.objUrl)">{{item.fileName}}</view>
					<view class="img-close" @click="berthDelete(index)">
						<image class="img-b" src="/static/inforRep02.png"></image>
					</view>
				</view>
			</block>
			<view  class="img-upload" @tap="onUpload()">
				上传附件
			</view>
		</view>
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
	</view>
</template>

<script>
	import lFile from '../../components/l-file/l-file.vue';
	export default {
		components:{
			Lfile: lFile
		},
		data() {
			return{
				picture: [],
			}
		},
		methods:{
			/* 上传文件 */
			onUpload() { 
				this.$refs.lFile.upload({
					// #ifdef APP-PLUS
					// nvue页面使用时请查阅nvue获取当前webview的api，当前示例为vue窗口
					currentWebview: this.$mp.page.$getAppWebview(),
					// #endif
					//非真实地址，记得更换,调试时ios有跨域，需要后端开启跨域并且接口地址不要使用http://localhost/
					url: 'http://39.100.121.170:8090/gxyjapp/api/upload/file',
					//默认file,上传文件的key
					name: 'file',
					header: {'X-Access-Token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1OTU3MzQzOTUsInVzZXJuYW1lIjoibm55amoifQ.Rkkoi-Bg524fvv-6q40f8QqKR1ChkSV4dx1M6Go8zD0'},
					//...其他参数
				});
			},
			onSuccess(res) {
				console.log('上传成功回调',res);
				let obj = {
					fileName: res.fileName,
					objUrl: JSON.parse(res.data.id).message
				}
				console.log(obj)
				this.picture.push(obj)
				// uni.showToast({
				// 	title: JSON.stringify(res),
				// 	icon: 'none'
				// })
			},
			//预览
			onOpenDoc(objUrl) {
				let url = Config.url.image + objUrl;//图片网络路径
				console.log('url ==>', url)
				/* 下载返回临时路径（退出应用失效） */
				this.$refs.lFile.download(url)
				.then(path=>{
					console.log(path)
					/* 预览 */
					this.$refs.lFile.open(path);
				}).catch((err) => {
					console.log(err)
				});
			},
			
			// 图片删除
			berthDelete: function(e) {
				console.log(e); //图片的id
				let that = this;
				let imgsrc = that.picture; //图片的数组
				uni.showModal({
					title: '提示',
					content: '确定要删除该附件吗',
					success(res) {
						if (res.confirm) {
							imgsrc.splice(e, 1);
							that.picture = imgsrc
						}else if (res.cancel) {}
					}
				})
			
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.container{
		.title {
			color: #333;
			font-size: 32rpx;
			line-height: 100rpx;
		}
				
		.files {
			.fileName{
				color: #0062CC;font-size: 24rpx;line-height: 70rpx;height: 70rpx;
				.left-name{
					width: calc(100% - 40rpx);height: 70rpx;line-height: 70rpx;
				}
				.img-close {
					width: 38rpx;height: 38rpx;
				}
			}
			.img-upload {
				width: calc(100% - 60rpx);color: #666;text-align: center;font-size: 28rpx;border-radius: 10rpx;border: 2rpx solid #999;line-height: 70rpx;height: 70rpx;margin: 30rpx auto;
			}
		}
	}
</style>
